<!--
 * @Descripttion: 
 * @version: 
 * @Author: xcb
 * @Date: 2021-03-16 09:48:46
 * @LastEditors: gzy 810461372@qq.com
 * @LastEditTime: 2023-09-12 10:39:49
-->
<template>
  <el-radio-group v-model="longTimeFrecastShowType">
    <el-radio-button label="cyz" @click="getChartData('cyz')">
      冲淤总量
    </el-radio-button>
    <el-radio-button label="cyzavg" @click="getChartData('cyzavg')">
      年均冲淤量
    </el-radio-button>
    <el-radio-button label="cyqavg" @click="getChartData('cyqavg')">
      年均冲淤强度
    </el-radio-button>
    <el-radio-button label="csd" @click="getChartData('csd')">
      平均冲刷深度
    </el-radio-button>
    <el-radio-button label="h" @click="getChartData('h')">
      沿程深泓线
    </el-radio-button>
    <el-radio-button label="cy" @click="getChartData('cy')">
      冲淤量
    </el-radio-button>
    <el-radio-button label="as" @click="getChartData('as')">
      冲淤面积
    </el-radio-button>
  </el-radio-group>

  <el-row>
    <!-- 成果图表 -->
    <el-col :span="24">
      <div
        id="long_time_forecast_echarts"
        style="height: 290px; width: 100%"
      ></div>
    </el-col>

    <!-- 沙峰抵达时间表格 -->
    <!-- <el-col :span="5" style="padding-right: 10px">
      <el-table
        :data="resultParam.sandPushMainSiteTimeData"
        empty-text="当前方案暂无沙峰数据"
        border
        height="180px"
        size="small"
        style="width: 100%"
      >
        <el-table-column label="沙峰推演" align="center">
          <el-table-column prop="stnm" label="站点" width="60" align="center" />
          <el-table-column prop="xsnm" label="断面" align="center" />
          <el-table-column prop="sdf" label="推算抵达时间" align="center" />
        </el-table-column>
      </el-table>
    </el-col> -->
  </el-row>

  <!-- <el-row>
    <el-col :span="2">
      <div class="plan-result-play">
        <PauseCircleOutlined
          :style="{
            color: resultParam.playType === 'pause' ? '#409eff' : '',
          }"
          @click="resultPlayTypeChange('pause')"
        />
        <PlayCircleOutlined
          :style="{
            color: resultParam.playType === 'play' ? '#409eff' : '',
          }"
          @click="resultPlayTypeChange('play')"
        />
      </div>
    </el-col>
    <el-col :span="22" style="display: flex">
      <el-slider
        v-if="resultParam.linkageStatus"
        range
        v-model="resultParam.silderRange"
        :marks="resultParam.silderRangeDataObj"
        :format-tooltip="sliderFormat"
        :max="resultParam.silderRangeLength"
        @change="sliderRangeChange"
      />
      <el-slider
        v-else
        v-model="resultParam.silderIndex"
        range
        :marks="resultParam.silderDataObj"
        :format-tooltip="sliderFormat"
        :max="resultParam.silderLength"
        @change="sliderChange"
      />

      <el-button
        @click="rangeSelection"
        style="margin-left: 20px; margin-top: -10px"
        size="mini"
      >
        范围选取
      </el-button>
    </el-col>
  </el-row> -->
</template>

<script lang="ts" setup>
import { ref, defineComponent, onMounted } from "vue";
import * as echarts from "echarts";

import { getPsDiaoDuList } from "@/request/api";

const longTimeFrecastShowType = ref("cyz");

onMounted(() => {
  getChartData(longTimeFrecastShowType.value);
});

async function getChartData(dataType) {
  console.log(dataType);

  const requestData = await getPsDiaoDuList({
    plannos: "0bc7737e-5357-43a9-b38d-083106406ce6",
    dataType,
  });

  let seriesData = [],
    xAxisData = [],
    xAxisName = "",
    yAxisName = "",
    xAxisAxisLabelInterval: any = "auto";

  if (
    dataType === "cyz" ||
    dataType === "cyzavg" ||
    dataType === "cyqavg" ||
    dataType === "csd"
  ) {
    xAxisData = Object.values(requestData[0].arr);

    xAxisAxisLabelInterval = 0;

    for (const key in requestData[0].data) {
      seriesData.push({
        name: `${key}年`,
        type: "bar",
        data: xAxisData.map((item) => {
          return requestData[0].data[key].find((ele) => ele.cdstcd === item)
            .resultdata;
        }),
      });

      xAxisName = "";
      yAxisName = "冲淤量(亿m³)";
      if (dataType === "cyqavg") {
        yAxisName = "冲淤量(万m³/km.a)";
      }

      switch (dataType) {
        case "cyzavg":
          yAxisName = "年均冲淤量(亿m3/a)";
          break;
        case "cyqavg":
          yAxisName = "年均冲淤强度(万m3/km.a)";
          break;
      }
    }
  } else if (dataType === "h") {
    for (const key in requestData[0].data) {
      seriesData.push({
        name: `${key}年`,
        type: "line",
        data: requestData[0].data[key].map((item) => {
          return [item.cdname, item.resultdata];
        }),
      });

      xAxisData = seriesData[0].data.map((item) => item[0]);

      xAxisName = "";
      yAxisName = "深泓高程(m)";
    }
  } else if (dataType === "cy" || dataType === "as") {
    for (const key in requestData[0].data) {
      seriesData.push({
        name: `${key}年`,
        type: "bar",
        data: requestData[0].data[key]
          .map((item) => {
            return [item.cdname, item.resultdata];
          })
          .reverse(),
      });

      xAxisData = seriesData[0].data.map((item) => item[0]);

      xAxisName = "";
      yAxisName = "米";
    }
  }

  echartsInit(
    seriesData,
    xAxisData,
    xAxisName,
    yAxisName,
    xAxisAxisLabelInterval
  );
}

function echartsInit(
  seriesData,
  xAxisData,
  xAxisName,
  yAxisName,
  xAxisAxisLabelInterval
) {
  let myChart = echarts.init(
    document.getElementById("long_time_forecast_echarts")
  );

  myChart.clear();

  let option = {
    tooltip: {
      trigger: "axis",
    },
    legend: {
      type: "scroll",
      width: 500,
    },
    grid: {
      top: 45,
      right: 100,
      bottom: 25,
      left: 25,
      containLabel: true,
    },
    xAxis: {
      type: "category",
      name: xAxisName,
      axisTick: {
        show: true,
        inside: true,
      },
      axisLine: {
        onZero: false,
      },
      axisLabel: {
        interval: xAxisAxisLabelInterval,
      },
      data: xAxisData,
    },
    yAxis: {
      type: "value",
      name: yAxisName,
      // min: "dataMin",
      // max: "dataMax",
      axisTick: {
        show: true,
        inside: true,
      },
      axisLine: {
        show: true,
      },
    },
    series: seriesData,
  };

  console.log(option);

  option && myChart.setOption(option);
}
</script>

<style scoped lang="less">
.header {
  background: #409eff;
  height: 70px;
  color: white;
  img {
    margin: 11px;
    vertical-align: top;
  }
  h3 {
    display: inline-block;
    line-height: 70px;
    font-size: 28px;
  }
}
</style>
